<template>
  <div class="total-user">
    <CommonCard title="累计用户数" :value="reportData.totalUser">
      <v-chart :option="option"></v-chart>
      <template #footer>
        <div class="wrapper">
          <div>
            <span>日同比</span>
            <span class="css-1">{{reportData.userGrowLastDay}}%</span>
            <span :class="{
              increase : reportData.userGrowLastDay > 0,
              decrease : reportData.userGrowLastDay < 0,
            }"></span>
          </div>
          <div>
            <span>月同比</span>
            <span class="css-1">{{reportData.userGrowLastMonth}}%</span>
            <span :class="{
              increase : reportData.userGrowLastMonth > 0,
              decrease : reportData.userGrowLastMonth < 0,
            }"></span>
          </div>
        </div>
      </template>
    </CommonCard>
  </div>
</template>
<script>
import CommonCard from './CommonCard.vue'
export default {
  props:['reportData'],
  components: {
    CommonCard,
  },
  data() {
    return {
      option: null,
    }
  },
  methods: {
    renderChart(data1,data2) {
      this.option = {
        xAxis: {
          type: 'value',
          show: false,
        },
        yAxis: {
          type: 'category',
          show: false,
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
        series: [
          {
            type: 'bar',
            data: [data1],
            itemStyle: {
              color: 'green',
            },
            barWidth: 10,
            stack: 'stack',
          },
          {
            type: 'bar',
            data: [data2],
            itemStyle: {
              color: '#ddd',
            },
            barWidth: 10,
            stack: 'stack',
          },
          {
            type: 'custom',
            renderItem: function (param, api) {
              // 获取三角形的绘制位置
              const endPoint = api.coord([api.value(0), 0])
              // 返回两个形状
              return {
                type: 'group',
                children: [
                  {
                    type: 'path',
                    shape: {
                      d: 'M889.696 320.8H158.848l365.504 365.536 365.344-365.536z',
                      x: endPoint[0] - 5,
                      y: 5,
                      width: 10,
                      height: 10,
                      layout: 'cover',
                    },
                    style: {
                      fill: 'green',
                    },
                  },
                  {
                    type: 'path',
                    shape: {
                      d: 'M511.744 319.999l-383.744 383.744h767.488l-383.744-383.744z',
                      x: endPoint[0] - 5,
                      y: 35,
                      width: 10,
                      height: 10,
                      layout: 'cover',
                    },
                    style: {
                      fill: 'green',
                    },
                  },
                ],
              }
            },
            data: [130],
          },
        ],
      }
    },
  },
  watch: {
    reportData(newValue) {
      this.renderChart(newValue.userLastMonth, newValue.userToday);
    },
  },
}
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  gap: 10px;
}
</style>
